<!-- 学生登录界面 -->
<template>
  <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"">
                                        <el-form-item class=" input-label" label="手机号">
    <el-input v-model.number="formLabelAlign.phone" maxlength="11" minlength="11" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item class="code-label" label="验证码">
      <el-input v-model="formLabelAlign.code" placeholder="验证码" maxlength="6" minlength="6" type="text"
        class="code-input"></el-input>
      <el-button type="primary" :disabled="flag" class="code-btn" @click="sendCode()">{{ codeContext }}</el-button>
    </el-form-item>
    <div>
      <a href="javascript:;" @click="cut()">使用密码</a>
    </div>
    <div class="submit">
      <el-button type="primary" class="row-login" @click="login()">登录</el-button>
    </div>
    <!-- <div class="options">
                <p class="find"><a href="javascript:;">找回密码</a></p>
                <div class="register">
                  <span>没有账号?</span>
                  <span><a href="javascript:;">去注册</a></span>
                </div>
              </div> -->
  </el-form>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TeacherPhone",
  data() {
    return {
      codeContext: "获取验证码",
      role: 2,
      labelPosition: "left",
      formLabelAlign: {
        phone: "",
        code: "",
      },
      flag: false,
      phoneReg: /^1[3456789][0-9]{9}$/
    };
  },
  methods: {
    //用户登录请求后台处理
    sendCode() {
      if (
        this.formLabelAlign.phone == undefined ||
        this.formLabelAlign.phone == ""
      ) {
        this.$message("请输入手机号");
        return;
      }
      if (
        !this.phoneReg.test(this.formLabelAlign.phone)
      ) {
        this.$message("手机号格式有误");
        return;
      }

      let formData = new FormData()
      formData.append("phone", this.formLabelAlign.phone)
      this.$axios.post("/api/send", formData).then(res => {
        console.log(res);
        this.$message(res.data.data)
        if (res.data.data == '发送成功') {
          let number = 60
          this.flag = true
          let time = setInterval(() => {
            number--
            this.codeContext = `${number}秒后发送`
            if (number <= 0) {
              this.codeContext = "发送验证码"
              this.flag = false
            }
          }, 1000)
        }
      })
    },
    login() {
      if (this.formLabelAlign.phone == "" || this.formLabelAlign.phone < 11) {
        this.$message("请输入11位手机号");
        return
      }
      if (this.formLabelAlign.code == "" || this.formLabelAlign.code < 6) {
        this.$message("请输入6位验证码");
        return
      }
      this.$store.dispatch("login/codeLogin", this.formLabelAlign)
    },
    clickTag(key) {
      this.role = key;
    },
    cut() {
      this.$store.commit("login/CUT", 2);
    },
  },
  computed: mapState(["userInfo"]),
  mounted() {

    let _thsi = this
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        _thsi.login()
      }
    }
  },
  beforeDestroy() {
    document.onkeydown = ''
  },
};
</script>

<style lang="less" scoped>
.remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 50%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border-left: 4px solid #409eff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.container {
  margin-bottom: 32px;
}

.container .el-radio-group {
  margin: 30px 0px;
}

a:link {
  color: #ff962a;
  text-decoration: none;
}

#login {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}

#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url("../../../../assets/img/loginbg.png") center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}

#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#login .main-container .top {
  margin-top: 100px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}

#login .top .icon-kaoshi {
  font-size: 80px;
}

#login .top .title {
  margin-top: 20px;
}

#login .bottom {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#login .bottom .title {
  text-align: center;
  font-size: 30px;
}

.bottom .container .title {
  margin: 30px 0px;
}

.bottom .submit .row-login {
  width: 100%;
  background-color: #04468b;
  border-color: #04468b;
  margin: 20px 0px 10px 0px;
  padding: 15px 20px;
}

.bottom .submit {
  display: flex;
  justify-content: center;
}

.footer {
  margin-top: 50px;
  text-align: center;
}

.footer .msg1 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
}

.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 70px;
}

.bottom .options {
  margin-bottom: 40px;
  color: #ff962a;
  display: flex;
  justify-content: space-between;
}

.bottom .options>a {
  color: #ff962a;
}

.bottom .options .register span:nth-child(1) {
  color: #8c8c8c;
}

.code-input {
  width: 80px;
}

.code-btn {
  width: 120px;
}
</style>
